<template>
  <div class="header">
    <div class="left">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <span class="el-icon-video-play window-icon"></span>下拉菜单
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>关于</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="middle">
      <!-- <span>中</span> -->
    </div>
    <div class="right">
      <span @click="openDevtools" class="el-icon-more-outline window-devtools" title="开发者工具"></span>
      <span @click="fullScreen" class="el-icon-full-screen window-fullscreen" title="全屏"></span>
      <span @click="reloadWindow" class="el-icon-refresh window-reload" title="重新加载"></span>
      <span @click="minWindow" class="el-icon-minus window-min" title="最小化"></span>
      <span @click="maxWindow" class="el-icon-copy-document window-max" title="最大化"></span>
      <span @click="close" class="el-icon-close window-close" title="关闭"></span>
    </div>
  </div>
</template>

<script>
// import { remote, shell } from "electron";
const { remote, shell } = require("electron");
import { WindowUtil } from "../api/window";
// const { WindowUtil } = require();
const winUtil = new WindowUtil();

export default {
  data() {
    return {
      // 是否显示关于页面
      showAbout: false,
    };
  },
  methods: {
    handlerAboutClick() {
      this.showAbout = false;
    },
    openDevtools() {
      winUtil.openDevtools();
    },
    reloadWindow() {
      winUtil.reloadWindow();
    },
    fullScreen() {
      winUtil.fullScreen();
    },
    minWindow() {
      winUtil.minWindow();
    },
    maxWindow() {
      winUtil.maxWindow();
    },
    close() {
      winUtil.close();
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 37px !important;
}

.left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.middle {
  -webkit-app-region: drag;
  flex: 1;
  height: 100%;
  margin: 0 10px;
}

.right {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.window-icon {
  color: #5dee00;
  font-size: 1.1em;
}

.window-devtools, .window-fullscreen, .window-reload, .window-close, .window-max, .window-min {
  cursor: pointer;
  font-size: 1.1em;
  padding: 0 10px;
}
</style>